<template>
  <div class="app-container">
    <!-- <app-header></app-header> -->
    <div class="app-main">
      <network :request="fetchData" ref="network">
        <template v-if="commentType">
          <div class="comment-wrapper">
            <div class="item">
              <span>申请编号</span>
              <span>{{ commentBasicInfo.propertyNumber }}</span>
            </div>
            <div class="item">
              <span>申请时间</span>
              <span>{{ dateFormat(commentBasicInfo.createTime) }}</span>
            </div>
            <div class="item">
              <span>客户经理</span>
              <span>{{ commentBasicInfo.managerName }}</span>
            </div>
            <template v-if="commentType === 'undo'">
              <div class="item">
                <span>请评分</span>
                <span>
                  <Star v-model="score" style="justify-content:flex-end"></Star>
                </span>
              </div>
              <mt-field
                type="textarea"
                class="textarea"
                placeholder="请对客户经理的服务进行评价"
                v-model="comment"
                v-hint-emoji
              ></mt-field>
              <div class="anonymity">
                <checkbox v-model="anonymity"></checkbox>
                <span>使用匿名评价</span>
              </div>
            </template>
            <template v-else>
              <div class="item">
                <span>{{ anonymity ? "匿名" : "实名" }}评分</span>
                <span>
                  <star :value="score" style="justify-content:flex-end"></star>
                </span>
              </div>
              <div
                class="item"
                v-for="comment in commentList"
                :key="comment.evaluateId"
              >
                <span>{{ comment.evaluatevalValue }}</span
                ><span>{{ dateFormat(comment.evaluatevalDate) }}</span>
              </div>
            </template>
          </div>

          <div class="btn-group">
            <button class="btn btn-plain" @click="submit">
              {{ commentType === "undo" ? "提交" : "写追评" }}
            </button>
            <button class="btn btn-primary" @click="$router.back()">
              返回
            </button>
          </div>
        </template>
      </network>
      <div class="msgbox-wrapper" v-show="addCommentBoxShow">
        <div class="msgbox-mask" @click="hideAddCommentBox"></div>
        <div class="msgbox">
          <div class="msgbox-header">追加评价</div>
          <div class="msgbox-content">
            <mt-field
              type="textarea"
              class="textarea"
              placeholder="请对客户经理的服务进行评价"
              v-model="comment"
              v-hint-emoji
            ></mt-field>
          </div>
          <div class="msgbox-btns">
            <button @click="hideAddCommentBox">取消</button>
            <button @click="add">提交</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Network, Star, Checkbox } from "@/components";
import { getCommentInfo, submitComment, addComment } from "@/api/customer";
import { dateFormat } from "@/utils";
export default {
  name: "comment",
  components: { Network, Star, Checkbox },
  data() {
    return {
      commentType: "", // undo:未评价 done:已评价
      score: 5, //评分
      comment: "", // 评论
      anonymity: false, //是否匿名
      addCommentBoxShow: false, //追加评论
      commentList: [], // 已评论列表
      commentBasicInfo: {}, // 评论基本信息
      dateFormat: date => dateFormat(date, "yyyy-MM-dd hh:mm:ss")
    };
  },
  methods: {
    /* 数据初始化*/
    fetchData() {
      return getCommentInfo({ PropertyNumber: this.$route.params.id }).then(
        res => {
          if (res.respCode === "000000") {
            this.commentType = res.params.commentState ? "undo" : "done";
            this.commentBasicInfo = res.params.Property || res.params.Evaluate;
            this.commentList = res.params.EvaluatevalList;
            this.commentBasicInfo.evaluateGrade &&
              (this.score = this.commentBasicInfo.evaluateGrade);
            this.commentBasicInfo.evaluateState &&
              (this.anonymity = !this.commentBasicInfo.evaluateState);
          }
        }
      );
    },
    /* 追加评论box显示 */
    showAddCommentBox() {
      this.addCommentBoxShow = true;
    },
    /* 追加评论box隐藏 */
    hideAddCommentBox() {
      this.addCommentBoxShow = false;
      this.comment = "";
    },
    /* 提交评论 */
    submit() {
      if (this.commentType === "undo") {
        if (!this.comment) {
          this.$messagebox.alert("请输入您的评价内容");
          return;
        }
        submitComment({
          PropertyNumber: this.$route.params.id,
          EvaluateState: this.anonymity ? 1 : 0,
          EvaluateGrade: this.score,
          EvaluatevalValue: this.comment
        }).then(res => {
          if (res.respCode === "000000") {
            this.$toast({
              message: "提交成功",
              position: "bottom",
              duration: 1500
            });
            this.$refs.network.init();
            this.comment = "";
          }
        });
      } else {
        /* 已评论 */
        this.showAddCommentBox();
      }
    },
    /* 追加评论 */
    add() {
      if (!this.comment) {
        this.$toast({
          message: "请输入评价内容",
          position: "bottom",
          duration: 1500
        });
        return;
      }
      addComment({
        EvaluateId: this.commentBasicInfo.evaluateId,
        EvaluatevalValue: this.comment
      }).then(res => {
        if (res.respCode === "000000") {
          this.hideAddCommentBox();
          this.$toast({
            message: "提交成功",
            position: "bottom",
            duration: 1500
          });
          this.$refs.network.init();
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "index.scss";
</style>
